<template>
  <view class="container">
    <view class="create-post">
      <input class="input title-input" type="text" v-model="title" placeholder="请输入标题" />
      <textarea class="input content-input" v-model="content" placeholder="请输入正文内容..." />
      <view class="action-buttons">
        <button class="btn outline" style="flex: 1;" @tap="handleAddImage">
          <text class="iconfont icon-image"></text>
          <text>添加图片</text>
        </button>
        <button class="btn outline" style="flex: 1;" @tap="handleAddTopic">
          <text class="iconfont icon-topic"></text>
          <text>添加话题</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    handleAddImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          // TODO: 处理选择的图片
          console.log(res.tempFilePaths)
        }
      })
    },
    handleAddTopic() {
      // TODO: 实现添加话题功能
      uni.showToast({
        title: '暂未开放此功能',
        icon: 'none'
      })
    }
  },
  onNavigationBarButtonTap() {
    if (!this.title || !this.content) {
      uni.showToast({
        title: '请填写完整内容',
        icon: 'none'
      })
      return
    }
    
    // TODO: 实现发布逻辑
    uni.navigateBack()
  }
}
</script>

<style lang="scss">
@import '@/common/styles/common.scss';

.create-post {
  padding: 24rpx;
  
  .title-input {
    font-size: 36rpx;
    font-weight: bold;
  }
  
  .content-input {
    height: 400rpx;
    padding: 24rpx;
  }
  
  .action-buttons {
    display: flex;
    gap: 24rpx;
    
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        margin-right: 8rpx;
      }
    }
  }
}
</style> 